<template>
	<scroll-view class="my-collect" scroll-y @scrolltolower="getList">
		<view class="list">
			<goods v-for="(item,index) in list" :key="item.id" :index="index" :item="item" @active="toDetail"></goods>
		</view>
		<view v-if="list.length > 0" @click="getList">
			<v-loadmore :status="loadStatus"></v-loadmore>
		</view>
		<v-nodata v-else-if="page > 1"></v-nodata>
	</scroll-view>
</template>

<script>
	import goods from "./goods";
	export default{
		components:{
			goods
		},
		data(){
			return {
				list: [],
				loadStatus: "more",
				page: 1,
				total: 0,
				isReset: false
			}
		},
		mounted() {
			this.getList();
		},
		methods:{
			toDetail(id){
				this.$tool.navto(`/pages/goods_details/index?id=${id}`);
			},
			getList(){
				let that = this;
				if (this.loadStatus != "more") return;
				this.loadStatus = "loading";
				this.$http.get("v1/getMyCollectPageData?page=" + this.page).then(res=>{
					let data = res.data.pageData;
					if(this.page == 1) this.total = data.count;
					if(this.isReset) {
						this.list = [];
						this.isReset = false;
					}
					
					this.list.push(...data.data);
					
					if(this.list.length >= this.total) {
						this.loadStatus = "nomore";
						return;
					}else this.loadStatus = "more";
					
					this.page++;
				}).catch(err => {
					this.loadStatus = "more";
				});
			},
			reset(){
				this.loadStatus = "more";
				this.page = 1;
				this.total = 0,
				this.isReset = true;
			},
			reload(){
				this.reset();
				this.getList();
			},
		},

	}
</script>

<style lang="scss" scoped>
	.list{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.my-collect{
		height: 100%;
	}
</style>